import React, { useState } from 'react'
import style from './index.module.scss'
import { Avatar } from 'antd'
import img from '@/assets/home/touxiang.jpg'
import { useEffect } from 'react'
import {  getLikeAndFavoriteApi } from '@/common/api'
import { getLs, getTimer } from '@/common/common'
import Common from './Common'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
// import UseSocketHook from '@/components/ComponentHook/UseSocketHook'
import { useNavigate } from 'react-router-dom'
import { UserOutlined } from '@ant-design/icons'
export default function LikeOrFavorite() {
  const {_id:authorId} = getLs("userInfo")
  const navigate = useNavigate()
  const {
    list,
    setList,
    endRef
  } = UsePaginatedHook(getLikeAndFavoriteApi,10,{authorId})
  // const {socketMessage} = UseSocketHook()
  const pushOtherDetail = ({operatorId})=>{
    navigate(`/userDetail?sign=${operatorId}`,{replace:true})
  }
  // useEffect(()=>{
  //   if(socketMessage){
  //     setList(preList=>{
  //       // 先检查有没有相同项
  //       const newArr = preList.filter(item=>item._id!==socketMessage._id)
  //       // newArr.unshift(socketMessage)
  //       return newArr
  //     })
  //   }
  // },[socketMessage])
  return (
    <>
      <ul>
        {
          list.map((item,index)=><li key={item._id} ref={list.length===index+1?endRef:null}>
            <div className='left'>
              {item?.avator?<Avatar src={`http://localhost:5000/${item?.avator}`}/>:<Avatar icon={<UserOutlined />} />}
            </div>
            <div className='center'>
              <p onClick={()=>{pushOtherDetail(item)}}>{item.name}</p>
              <p>{item.type==='like'?'赞':'收藏'}了你的作品<span>{getTimer(item.timer)}</span></p>
              <p>{item.text}</p>
            </div>
            <div className='right'>
              <img src={`http://localhost:5000/${item.img}`} alt="" />
            </div>
      </li>)
        }
      </ul>
      {list.length===0&&<Common/>}
    </>
  )
  
}
